import React from "react";

import "./index.less";

const urlImg = [
  {
    title: "水费",
    img: "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
  },
  {
    title: "电费",
    img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-article.pchome.net%2Fgame%2F00%2F19%2F25%2F53%2F1csoil2zn.jpg&refer=http%3A%2F%2Fimg-article.pchome.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
  },
  {
    title: "宽带",
    img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
  },
  {
    title: "更多",
    img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F63%2F06%2F01300000348000123541068188112.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
  },
];

const shuiUrl = [
    {
        img: "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        title:'保洁'
    },
    {
        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        title:'搬家'
    },
    {
        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        title:'家修'
    }
]
const HotUrl = [
    {
        img: "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/09fa513d269759eed846184ab3fb43166d22df19.jpg",
        title:'日常保洁'
    },
    {
        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        title:'除螨保洁'
    },
    {
        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
        title:'宜居搬家'
    },
    {
        title: "充值卡优惠",
        img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.zol.com.cn%2Fpic%2Fyouxi%2Fori_46%2F469389.jpg&refer=http%3A%2F%2Fimg9.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg",
      },
]
export default class Main extends React.Component {
  gitUrl = () => {
    return (
      <>
        {urlImg.map((item) => {
          return (
              <li key={item.title}>
                <div className="urlImg">
                  <img src={item.img} alt="" />
                </div>
                <p>{item.title}</p>
              </li>
          );
        })}
      </>
    );
  };
  service=()=>{
      return(
          <>
          {shuiUrl.map(item=>{
              return(
                  <li key={item.title}>
                      <img src={item.img} alt="" />
                      <div className="background">{item.title}</div>
                  </li>
              )
          })}
          </>
      )
  }
  getHotUrl=()=>{
      return(
          <>
          {HotUrl.map(item=>{
              return(
                <li key={item.title}>
                    <img src={item.img} alt="" />
                    <div className="wenzhi">
                        {item.title}
                    </div>
                </li>
              )
          })}
          </>
      )
  }
  render() {
    return (
      <div className="shenghuo">
        <p>生活缴费</p>
        <div className="jiaofen">
          <ul>
          {this.gitUrl()}
          </ul>
        </div>
        <div className="baojie">
          <ul>
            {this.service()}
          </ul>
        </div>
        <div className="recommend">
          <p>
            热门推荐 <span>为您提供最优质的的服务，享受生活每一天</span>
          </p>
          <ul>
            {this.getHotUrl()}
          </ul>
        </div>
      </div>
    );
  }
}
